<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 500px;
            margin: 0;
        }

    </style>
</head>
<body>
    
    <script type="text/javascript">
    
        var div = document.createElement('div');

        document.body.appendChild(div);

        div.style.width = '100px';
        div.style.height = '100px';
        div.style.backgroundColor = 'red';
        div.style.position = 'absolute';
        div.style.left = '0';
        div.style.top = '0';
        //console.log(div.style.left);

        // var timer = setInterval(function(){
        //     div.style.left = parseInt(div.style.left) + 10 + 'px';
        //     div.style.top = parseInt(div.style.top) + 10 + 'px';
        //     if(parseInt(div.style.left) > 200 && parseInt(div.style.top) > 200){
        //         clearInterval(timer);
        //     }
        // }, 100);

        
        document.onkeydown = function(e) {
            console.log(e);
            switch(e.which){
                case 37: 
                    div.style.left = parseInt(div.style.left) - 5 + 'px';
                    break;
                case 38:
                    div.style.top = parseInt(div.style.top) - 5 + 'px';
                    break;
                case 39: 
                    div.style.left = parseInt(div.style.left) + 5 + 'px';
                    break;
                case 40: 
                    div.style.top = parseInt(div.style.top) + 5 + 'px';
                    break;

            }
        }
    

    
    </script>
</body>
</html>